<template>
  <el-form label-width="100px">
    <el-form-item label="1.关卡名称:" :required="true">
      <el-input
        v-model="form.name"
        style="width: 266px"
        maxlength="10"
        show-word-limit
        placeholder="输入关卡名称"
      />
    </el-form-item>
    <el-form-item label="2.关卡简介:" :required="true">
      <el-input
        v-model="form.description"
        type="textarea"
        :autosize="{ minRows: 3, maxRows: 4}"
        style="width: 266px"
        maxlength="40"
        show-word-limit
        placeholder="对关卡内容的简单介绍"
      />
    </el-form-item>
    <el-form-item label="3.关卡类型:" :required="true">
      <el-radio-group v-model="form.type">
        <el-radio-button label="1">教学项目</el-radio-button>
        <el-radio-button label="2">课堂练习</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="4.关卡文件:" :required="true">
      <el-select v-model="form.work_id" style="width: 195px" class="filter-item" value="">
        <el-option
          v-for="item in files"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item :required="true">
      <span slot="label">5.关卡封面:<br>(266 X 200)</span>
      <div class="avatar">
        <img :width="266" :height="200" :src="form.pageURL" alt="">
      </div>
    </el-form-item>
    <el-form-item>
      <el-button style="width: 100px" @click="() => { this.$emit('close') }">取消</el-button>
      <el-button v-if="mode" style="width: 150px" type="primary" @click="update">更新关卡</el-button>
      <el-button v-else style="width: 150px" type="primary" @click="create">创建关卡</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { createCourse, updateCourse } from '../../../api/course'
export default {
  name: 'CourseDialog',
  props: {
    files: {
      type: Array,
      default: function() {
        return []
      }
    },
    form: {
      type: Object,
      default: function() {
        return {
          id: null,
          name: '',
          description: '',
          imageType: '项目快照',
          work_id: null,
          pageURL: '',
          type: '1'
        }
      }
    },
    total: {
      type: Number,
      default: null
    },
    chapter: {
      type: Number,
      default: null
    },
    mode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  methods: {
    create() {
      this.form['chapter'] = this.chapter
      createCourse(this.form).then(() => {
        this.$SUCCESS('关卡创建成功')
        this.$close()
        this.$reload()
      }).catch(() => {
        this.$ERROR('关卡创建失败')
      })
    },
    update() {
      updateCourse(this.form).then(() => {
        this.$SUCCESS('关卡更新成功')
        this.$close()
        this.$reload()
      }).catch(() => {
        this.$ERROR('关卡更新失败')
      })
    }
  }
}
</script>

<style scoped>
    .avatar {
        width: 266px;
        height: 200px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
</style>
